<template>
  <el-main class="process-design">
    <div class="scale">
      <el-button :icon="Plus" @click="scale += 10" :disabled="scale >= 150" circle></el-button>
      <span>{{ scale }}%</span>
      <el-button :icon="Minus" @click="scale -= 10" :disabled="scale <= 40" circle></el-button>
      <!--      <el-button @click="validate">校验流程</el-button>-->
    </div>
    <div class="design" :style="'transform: scale(' + scale / 100 + ');'">
      <process-tree ref="processTree" @selectedNode="nodeSelected" />
    </div>
    <el-drawer :title="selectedNode.name" v-model="showConfig" :modal-append-to-body="false"
      :size="selectedNode.type === 'CONDITION' ? '600px' : '500px'" direction="rtl" destroy-on-close>
      <template #header>
        <div>
          <el-input v-model="selectedNode.name" v-show="showInput" style="width: 300px" @blur="showInput = false"></el-input>
          <el-link v-show="!showInput" @click="showInput = true" style="font-size: medium">
            <el-icon style="margin-right: 10px"><Edit /></el-icon>
            {{ selectedNode.name }}
          </el-link>
        </div>
      </template>
      <div class="node-config-content">
        <node-config />
      </div>
    </el-drawer>
  </el-main>
</template>

<script>
import { Plus, Minus, Edit } from '@element-plus/icons-vue'
import { computed, reactive, ref, toRefs } from 'vue'
import { useWorkFlowConfig } from '/@/stores/workFlow'
import { storeToRefs } from 'pinia'
import ProcessTree from '/@/views/setting/workflow/components/process/ProcessTree.vue'
import NodeConfig from '/@/views/setting/workflow/process/config/NodeConfig.vue'

export default {
  name: 'ProcessDesign',
  components: {
    Edit,
    ProcessTree,
    NodeConfig
  },
  setup() {
    const storesWorkFlowConfig = useWorkFlowConfig()
    const workFlowConfig = storeToRefs(storesWorkFlowConfig)
    const processTree = ref()
    const state = reactive({
        scale: 100,
        selected: {},
        showInput: false,
        showConfig: false,
    })
    const selectedNode = computed(() => {
        return workFlowConfig.selectedNode.value
    })
    const validate = () => {
      return processTree.value.validateProcess()
    }
    const nodeSelected = (node) => {
        console.log('配置节点', node)
        state.showConfig = true
    }
    return {
        ...toRefs(state),
        Plus,
        Minus,
        selectedNode,
        processTree,
        validate,
        nodeSelected
    }
  }
}
</script>

<style scoped lang="scss">
.design {
  margin-top: 100px;
  display: flex;
  transform-origin: 50% 0px 0px;
}
.scale {
  z-index: 999;
  position: fixed;
  top: 80px;
  right: 40px;
  span {
    margin: 0 10px;
    font-size: 15px;
    color: #7a7a7a;
    width: 50px;
  }
}
.node-config-content {
  padding: 0 20px 20px;
}
:deep(.el-drawer__body) {
  overflow-y: auto;
}
</style>
<style lang="scss">
.process-design{
  .el-button i.el-icon {
    margin-right: 0;
  }
}
</style>